<template>
    <theme-box title="电子券广告添加">
        <form class="form-inline" @submit.prevent v-el:form>
            <div class="box-body">
                <form-select title="商户名称" :required="true" name="mchtId" :options="mchtList" :value.sync="mchtIdValue"></form-select>
                <form-select title="电子券名称" :required="true"  name="couponId" :options="coupList"></form-select>
                <form-input title="名称" :required="true" name="name"></form-input>
                <form-group title="图片" :required="true" name="file">
                    <file-upload v-ref:fileupload class="fileImg"></file-upload>
                </form-group>
            </div>
            <!-- /.box-body -->
            <div class="box-footer">
                <v-button type="reset" @click="reset">重置</v-button>
                <v-button type="submit" theme="primary" class="pull-right">确认</v-button>
            </div>
            <!-- /.box-footer -->
        </form>
    </theme-box>
</template>

<script>
    import 'plugins/jquery-validation';
    var serialize = require('form-serialize');

    export default {
        data: () => ({
            mchtIdValue:'', //商户值
            mchtList:[], //商户列表
            coupList:[] //电子券列表
        }),
        watch: {
            async mchtIdValue(v){
                if(v != ''){
                    await this.$post({
                        url: "/api/v2" + projectName_Url + "/plat/coupon/queryCoupon",
                        data:{mchtId:v},
                        method:"POST"
                    }).then(response => {
                        let list = response.content.list;
                        if(list != '' && list != null){
                            this.$set("coupList", list);
                        }else{
                            this.coupList = []
                        }
                    }, error => {});
                }else{
                    await this.$post({
                        url: "/api/v2" + projectName_Url + "/plat/coupon/queryCoupon",
                        data:{mchtId:""},
                        method:"POST"
                    }).then(response => {
                        let list = response.content.list;
                        if(list != '' && list != null){
                            this.$set("coupList", list);
                        }
                    }, error => {});
                }
            }
        },
        methods: {
            reset() {
                $("label.error").remove();
                this.$els.form.reset()
            },
            getMcht(data) {
                let self = this;
                var mchtId = JSON.parse(localStorage.getItem("id_token")).mchtId
                self.$post({
                    url: "/api/v2" + projectName_Url + "/list/mcht/"+ mchtId,
                    method:"GET"
                }).then(response => {
                    let list = response.content.info;
                    if(list != '' && list != [] && list != null){
                       self.$set("mchtList", list);

                    }
                }, error => {});
            },
            getCoupon(){
                let self = this;
                self.$post({
                    url: '/api/v2' + projectName_Url + '/plat/coupon/queryCoupon',
                    data:{mchtId:''},
                    method: "POST"
                }).then(response => {
                    let list = response.content.list;
                    if(list != '' && list != null){
                        this.$set("coupList", list);
                    }
                },  error => {});
            }
        },
        ready() {
            var self = this;
            self.getMcht();
            self.getCoupon();
            $(this.$els.form).validate({
                submitHandler: async function (form) {
                    let formData = new FormData(form)
                    loading(true);
                    var result = await self.$post({
                        url: "/api/v2" + projectName_Url + "/plat/couponBanner/add",
                        data: formData,
                        method: "POST"
                    }).then(response => {
                        let data = {
                            title: "操作成功",
                            content: "是否进入电子券广告列表查看?"
                        }
                        self.reset();
                        Midway.confirm(data).then(function () {
                            self.$route.router.go('/couponBanner/bannerList');
                        })
                    }).then(() => loading(false)).catch(() => loading(false))
                },
                errorPlacement: function (error, element) {
                    if (element.attr("name") == "file") {
                        error.insertAfter(".file-item");
                    } else {
                        error.insertAfter(element)
                    }
                },
                rules: {
                    mchtId:{
                        required: true,
                    },
                    couponId:{
                        required: true,
                    },
                    name: {
                        required: true,
                        maxlength:25
                    },
                    file: {
                        required: true
                    }
                },
                messages: {
                    file: {
                        required: "请选择附件"
                    }
                }
            });
        }
    }
</script>
